import { Notification } from 'element-ui'

/**
 * 地图模块 - 风险范围
 */
export default {
    data() {
        return {
            paramsFXFW: {},
            fxfwLegned: ['#E22222', '#FF8D0C', '#F0C90B', '#00B2FF']
        }
    },
    computed: {
        basin() {
            return this.$store.getters.basin
        }
    },
    destroyed() {
        this.clearMeshFXFW()
        if (this.screenSpaceEventHandlerFXFW) {
            this.screenSpaceEventHandlerFXFW.destroy()
            this.screenSpaceEventHandlerFXFW = null
        }
        this.$eventBus.$off('showFXFW')
        this.$eventBus.$off('EB_YB_Mesh_CardSel')
        this.$eventBus.$off('showFXFWByParams')
        this.$eventBus.$off('EB_YJ_QX_BTN_FW')
        
    },
    created() {
        this.entitiesPonitFXFW = new Map()
        this.entitiesPolygonFXFW = new Map()
        this.screenSpaceEventHandlerFXFW = null

        // 监听参数变动
        this.$eventBus.$on('EB_YB_Mesh_CardSel', res => {
            this.paramsFXFW = res
            if (this.$store.getters.pageState.YJ === 'QX_FW') {
                this.showFXFW()
            }
        })

        // 监听地图tabchange事件，开始渲染
        this.$eventBus.$on('EB_YJ_QX_BTN_FW', res => {
            // console.log(res)
            if (res) {
                this.showFXFW()
            } else {
                this.hideFXFW()
            }
        })
    },
    mounted() {
        this.$nextTick(() => {
            this.creatMeshFXFW()
        })
    },
    methods: {
        creatMeshFXFW() {
            var urlJson = `${mapConfig.resUrlPre}/geojson/rainPrediction.json`
            this.$axios.get(urlJson).then(res => {
                res.data.features.forEach(feature => {
                    var coordinates = feature.geometry.coordinates[0]
                    var id = feature.properties.Id
                    var x = (coordinates[0][0] + coordinates[2][0]) / 2
                    var y = (coordinates[0][1] + coordinates[2][1]) / 2
                    var lonlats = [] // 每个四边形的四角lonlat
                    coordinates.forEach((lonlat, index) => {
                        if (index < 4) {
                            lonlats.push(lonlat[0])
                            lonlats.push(lonlat[1])
                        }
                    })
                    var nearFar = 20000
                    var entityPoint = {
                        eventName: 'FXFW',
                        position: Cesium.Cartesian3.fromDegrees(x, y),
                        point: {
                            pixelSize: 8,
                            color: Cesium.Color.YELLOW,
                            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, nearFar + 1000)
                        },
                        show: false
                    }
                    var label = {
                        text: '0',
                        disableDepthTestDistance: Number.POSITIVE_INFINITY, // 永远禁用深度测试
                        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                        pixelOffset: new Cesium.Cartesian2(0, -10),
                        scaleByDistance: new Cesium.NearFarScalar(0, 1.25, 50000, 0.75),
                        backgroundColor: Cesium.Color.BLUE,
                        // showBackground: true,
                        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                        fillColor: Cesium.Color.WHITE,
                        outlineColor: Cesium.Color.WHITE,
                        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                        font: '14px sans-serif',
                        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, nearFar)
                    }
                    entityPoint.label = label
                    var polyEntity = {
                        eventName: 'FXFW',
                        polygon: {
                            hierarchy: Cesium.Cartesian3.fromDegreesArray(lonlats),
                            material: Cesium.Color.fromRandom().withAlpha(0.5),
                            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(nearFar, 500000)
                        },
                        show: false
                    }
                    this.entitiesPonitFXFW.set(id, this.$viewer.entities.add(entityPoint))
                    this.entitiesPolygonFXFW.set(id, this.$viewer.entities.add(polyEntity))
                })
                // this.initEvevtFXFW()
            })
        },
        showFXFW() {
            var urlApi = '/api/EarlyWarning/GetWarningGrid'
            var prarms = {
                wswscd: this.basin,
                strMainId: this.paramsFXFW.id,
                // strMainId: 'aab5cfd5-5262-427b-acd1-753a7505d63a',
                iStep: this.paramsFXFW.step
            }
            this.$api.Get(urlApi, prarms).then(res => {
                this.hideFXFW()
                if (res.data.length < 1) {
                    Notification({
                        message: `此预警无风险范围`,
                        type: 'warning'
                    })
                    return
                }
                res.data.forEach(item => {
                    var color = this.fxfwLegned[Number(item.wlevel) - 1]
                    var wscdIndex = Number(item.wscdIndex)
                    var pointEntity = this.entitiesPonitFXFW.get(wscdIndex)
                    pointEntity.point.color = Cesium.Color.fromCssColorString(color)
                    pointEntity.show = true
                    // pointEntity._label._text._value = item.drp.toString() + 'mm'
                    pointEntity._label._text._value = ''
                    var polygonEntity = this.entitiesPolygonFXFW.get(wscdIndex)
                    polygonEntity.polygon.material = Cesium.Color.fromCssColorString(color).withAlpha(0.5)
                    polygonEntity.show = true
                })
            })
        },

        hideFXFW() {
            if (this.entitiesPonitFXFW.size > 0) {
                this.entitiesPonitFXFW.forEach((val, key) => {
                    val.show = false
                })
                this.entitiesPolygonFXFW.forEach((val, key) => {
                    val.show = false
                })
            }
        },
        clearMeshFXFW() {
            if (this.entitiesPonitFXFW.size > 0) {
                this.entitiesPonitFXFW.forEach((val, key) => {
                    this.$viewer.entities.remove(val)
                })
                this.entitiesPonitFXFW = new Map()
                this.entitiesPolygonFXFW.forEach((val, key) => {
                    this.$viewer.entities.remove(val)
                })
                this.entitiesPolygonFXFW = new Map()
            }
        }
    }
}
